<template>
    <RouterView />
    <van-tabbar v-model="active">
        <van-tabbar-item 
            v-for="item in router.options.routes[0].children" 
            :key="item.path" 
            :icon="item.meta.icon"
            :url="`#/${item.path}`"
        >
            {{ item.meta.name }}
        </van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const active = ref(0)

onMounted(() => {
    const data = router.options.routes[0].children
    active.value = data.findIndex(item => '/' + item.path === route.path)
})
</script>

<script scoped>

</script>